<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box  
            }
            #container {
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                flex-direction: column;
                padding-top: 20%
            }
            .inputItems {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 50px;
            }
            .inputItems .inputItem {
                border: 1px solid #ccc;
                padding: 5px 10px;
                width: 80%;
                border-radius: 23px;
                margin-top: 30px;
                height: 40px;
                display: flex;
                align-items: center;
            }
            .inputItems .inputItem input {
                border: none;
                outline: none;
                text-align: center;
                width: 100%;
            }
            .valueShow {
                display: flex;
                justify-content: center;
                gap: 5px;
            }
            .inputShowValue {
                background-color: white;
                border: none;
                outline: none;
                border-bottom: 1px solid #ccc;
                width: 40%;
                text-align: center;
                padding-bottom: 2px;
            }
            .fixInfo {
                position: fixed;
                bottom: 3%;
                color: #878787;
                font-size: 12px;
            }
            button {
                width: 80%;
                background-color: #eacc20;
                height: 40px;
                border-radius: 23px;
                margin-top: 50px;
            }
            .listContainer {
                width: 80%;
                margin-top: 20px;
                list-style: none;
            }
            .listContainer .listItem {
                width: 100%;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
                padding: 0 10px;
                text-align: center;
            }
            .redClass {
                color: red;
            }
        </style>
    </head>
    <body>


        <div id="container">
            <div>{{title}}</div>
            <div class='inputItems'>
                <div class="valueShow">
                    <input v-model="user.account" class="inputShowValue" disabled/>
                    <input v-model="user.password" class="inputShowValue" disabled/>
                </div>
                <div class='inputItem'>
                    <input v-model="user.account" placeholder='请输入登录账号'/>
                    
                </div>
                <div class='inputItem'>
                    <input v-model="user.password" placeholder='请输入登录密码'/>
                </div>
            </div>
            <button @click="handleClick">登录</button>
            <button @click="pushNewItem" v-bind:class="{customClass: customLimit + 1 > 2}">添加新项</button>
            <ul class="listContainer">
                <li v-for="item in list" :key="item.id" class="listItem">
                    {{item.des}}
                </li>
            </ul>
            <div class='fixInfo' :class="customClass">{{info.name}} {{info.version}}</div>

        </div>
    </body>
</html>

